<template>
  <div class="dashboard">
    <n-grid cols="1 s:2 m:4" responsive="screen" :x-gap="16" :y-gap="16">
      <n-grid-item>
        <n-card>
          <n-statistic label="总图书量" :value="dashboardData.totalBooks">
            <template #prefix>
              <n-icon :component="BookOutline" color="#18A058" />
            </template>
          </n-statistic>
        </n-card>
      </n-grid-item>
      
      <n-grid-item>
        <n-card>
          <n-statistic label="已借出" :value="dashboardData.borrowedBooks">
            <template #prefix>
              <n-icon :component="TimeOutline" color="#2080F0" />
            </template>
          </n-statistic>
        </n-card>
      </n-grid-item>
      
      <n-grid-item>
        <n-card>
          <n-statistic label="逾期数量" :value="dashboardData.overdueBooks">
            <template #prefix>
              <n-icon :component="WarningOutline" color="#F0A020" />
            </template>
          </n-statistic>
        </n-card>
      </n-grid-item>
      
      <n-grid-item>
        <n-card>
          <n-statistic label="总用户数" :value="dashboardData.totalUsers">
            <template #prefix>
              <n-icon :component="PeopleOutline" color="#D03050" />
            </template>
          </n-statistic>
        </n-card>
      </n-grid-item>
    </n-grid>
    
    <n-grid cols="1 m:2" responsive="screen" :x-gap="16" :y-gap="16" style="margin-top: 16px;">
      <n-grid-item>
        <n-card title="热门图书排行榜">
          <n-list>
            <n-list-item v-for="(book, index) in dashboardData.hotBooks" :key="book.id">
              <template #prefix>
                <n-tag :type="index < 3 ? 'success' : 'default'" round>{{ index + 1 }}</n-tag>
              </template>
              <div>
                <div style="font-weight: 500;">{{ book.title }}</div>
                <div style="font-size: 12px; color: #999;">{{ book.author }} | 借阅 {{ book.borrowCount }} 次</div>
              </div>
            </n-list-item>
            <n-empty v-if="!dashboardData.hotBooks?.length" description="暂无数据" />
          </n-list>
        </n-card>
      </n-grid-item>
      
      <n-grid-item>
        <n-card title="最近借阅记录">
          <n-list>
            <n-list-item v-for="record in dashboardData.recentRecords" :key="record.id">
              <div>
                <div style="font-weight: 500;">{{ record.bookTitle }}</div>
                <div style="font-size: 12px; color: #999;">
                  {{ record.username }} | {{ formatDate(record.borrowDate) }}
                </div>
              </div>
              <template #suffix>
                <n-tag :type="getStatusType(record.status)">{{ getStatusText(record.status) }}</n-tag>
              </template>
            </n-list-item>
            <n-empty v-if="!dashboardData.recentRecords?.length" description="暂无数据" />
          </n-list>
        </n-card>
      </n-grid-item>
    </n-grid>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { dashboardApi } from '@/api/dashboard'
import { NGrid, NGridItem, NCard, NStatistic, NIcon, NList, NListItem, NTag, NEmpty } from 'naive-ui'
import { BookOutline, TimeOutline, WarningOutline, PeopleOutline } from '@vicons/ionicons5'

const dashboardData = ref({
  totalBooks: 0,
  borrowedBooks: 0,
  overdueBooks: 0,
  totalUsers: 0,
  hotBooks: [],
  recentRecords: []
})

const loadDashboardData = async () => {
  try {
    const data = await dashboardApi.getDashboardData()
    dashboardData.value = data
  } catch (error) {
    console.error(error)
  }
}

const formatDate = (date) => {
  return new Date(date).toLocaleDateString('zh-CN')
}

const getStatusType = (status) => {
  const map = {
    BORROWED: 'info',
    RETURNED: 'success',
    OVERDUE: 'error'
  }
  return map[status] || 'default'
}

const getStatusText = (status) => {
  const map = {
    BORROWED: '借出中',
    RETURNED: '已归还',
    OVERDUE: '已逾期'
  }
  return map[status] || status
}

onMounted(() => {
  loadDashboardData()
})
</script>

<style scoped>
.dashboard {
  max-width: 1400px;
}
</style>

